<template>
	<view>
		<!-- <u-navbar title="新闻" :is-back="false" background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat"></u-navbar> -->
		<u-navbar title="新闻" :is-back="false" :background="{
		    url: 'https://www.yplm888.com/uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png',
		    repeat: 'no'
		}"></u-navbar>
		<view class="">
			<my-input @search='search' :value='searchVaule'></my-input>
		</view>
		<view class="">
			<scroll-view class="index-all-wrap" :scroll-y="true" :style="'height:' + scrollH+'rpx;'" @scrolltolower="lowerBottom" refresher-enabled="true"
			:refresher-triggered="triggered" :refresher-threshold="50" @refresherpulling="onPulling"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
				<view class="liveinfo-wrap news-wrap">
					<!-- 新闻列表 -->
					<view @click="viewNewsInfo(item)" class="live-list" v-for="(item, index) in newsList"
						:key="item.id">
						<view class="live-list-img-wrap">
							<image class="live-list-img new-img" :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="live-list-info">
							<view class="live-c-title u-line-1">{{item.title}}</view>
							<view class="new-content u-line-2 u-font-13">
								{{item.title}}
							</view>
							<view class="new-time">
								<u-icon name="calendar" color='#ccc'></u-icon>
								{{item.releasetime}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>


	</view>
</template>

<script>
	const app = getApp();
	import myInput from '../components/my-input.vue'

	export default {
		components: {
			myInput
		},
		data() {
			return {
				newsList: [],
				searchVaule: '',
				scrollH: 0,
				baseUrl: this.$u.http.config.baseUrl,
				page: 1,
				triggered: false,
			}
		},
		onReady() {
			// this.getnums();
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollH = res.windowHeight * 750 / res.windowWidth;
					// #ifdef MP-WEIXIN
					that.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) - 200;
					// #endif
				}
			});
		},
		onLoad() {
			this._freshing = false;
			this.initData()
		},
		onHide() {
			this.searchVaule = ''
		},
		onReachBottom() {
			this.page++
			this.initData()
		},
		methods: {
			initData() {
				// 获取新闻
				let newsQuary = {
					page: this.page,
					limit: 15,
					keyword: this.searchVaule
				}
				this.$u.api.getArticleList(newsQuary).then(res => {
					let dataList = res.data
					this.newsList =[...this.newsList, ...dataList]
				})
			},
			viewNewsInfo(data) {
				this.$u.route('/packageB/pages/about/about', {
					url: encodeURIComponent(data.url),
					title: data.title
				})
			},
			search(value) {
				console.log(value)
				this.searchVaule = value
				this.newsList = []
				this.initData()
			},
			onPulling(e) {
				this.triggered = true;
			},
			async onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.page=1;
				await setTimeout(async () => {
					this.triggered = false;
					this._freshing = false;
					this.newsList = []
					await this.initData();
				}, 1000);
				uni.showToast({
					title:'刷新成功',
					duration:1000
				})
			},
			onRestore() {
				this.triggered = false; // 需要重置
				console.log("onRestore");
			},
			onAbort() {
				console.log("onAbort");
			},
			// 触底加载
			lowerBottom() {
				this.page++;
				this.initData();
			}
		}
	}
</script>

<style>
	/* 大班课/内容列表公共样式 */
	@import url("/static/css/course_list.css");

	page {
		height: 100%;
		background-color: #FFFFFF;
		/* padding-bottom: 100rpx; */
	}


	.liveinfo-wrap {
		/* padding-top: 2rpx; */
		/* min-height: 1500rpx; */
		/* background-color: #FAFAFA; */
		padding-bottom: 20rpx;
	}

	.live-list {
		width: 90%;
		height: 220rpx;
		margin: 30rpx auto;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
	}

	.live-c-title {
		font-size: 28rpx;
		width: 410rpx;
		/* line-height: 35rpx; */
		height: 40%;
		/* margin-top: 20rpx; */
	}

	.new-img {
		border-radius: 20rpx;
	}

	.new-content {
		margin-top: -20rpx;
		font-size: 26rpx;
		color: #ccc;
	}

	.new-time {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #ccc;
	}

	.live-teacher-price {
		margin-top: 40rpx;
	}

	.price-wrap {
		margin-left: 55% !important;
	}

	.view-nums-title {

		color: #969696;
		font-size: 24rpx;
		margin-top: 22rpx;
	}

	.view-nums {
		margin-top: 22rpx;
		color: #969696;
		font-size: 24rpx;
	}

	.teacher-name {
		color: #969696;
	}

	.add-time {
		font-size: 24rpx;
		color: #969696;
		margin-top: 15rpx;
	}
</style>
